import React from 'react';
import {base} from 'nc-lightapp-front';
import {render, connect} from 'src/hrpub/common/frame';
import Layout from 'src/hrpub/common/components/Layout';
import TabAction from '../../actions/tab';
import TableAction from '../../actions/table';
import './index.less';

const {NCCheckbox, NCBackTop} = base;
const {Content} = Layout;
const {NCTabs, NCAnchor, NCScrollElement, NCScrollLink} = base;
const {NCTabPane} = NCTabs;
const Wrapper = render({
    actions: {
        tableAct: TableAction,
        tabAct: TabAction
    }
})(({props, action, state}) => {
    const {emp, editTable} = props;
    return (
        <Layout>
            <Content>
                <div className="tab-definInfo-area">
                    <NCTabs activeKey={emp.tabKey} onChange={action.tabAct.tabChange} defaultActiveKey="entry">
                        <NCTabPane
                            key="entry"
                            tab={emp.language['gx6008-000241']} //国际化处理： 在职人员
                        />
                        <NCTabPane
                            key="noentry"
                            tab={emp.language['gx6008-000242']} //国际化处理： 未在职人员
                        />
                        <NCTabPane
                            key="myteam"
                            tab={emp.language['gx6008-000243']} //国际化处理： 我的团队
                        />
                    </NCTabs>
                </div>
                <div id="text">
                    <NCAnchor>
                        {emp.infoSetData.map((item, index) => {
                            return (
                                <NCScrollLink
                                    to={'code' + index}
                                    spy={true}
                                    key={'code' + index}
                                    smooth={true}
                                    duration={300}
                                    offset={0}
                                >
                                    <span>{item.infosetname}</span>
                                </NCScrollLink>
                            );
                        })}
                    </NCAnchor>
                    {emp.infoSetData.map((item, index) => {
                        return (
                            <NCScrollElement name={'code' + index} key={'code' + index}>
                                <div>
                                    <span className="infoset-title">{item.infosetname}</span>
                                    <If condition={!!emp.approveMap[item.pk_infoset]}>
										<span style={{display: emp.currentPage === 'entry' ? 'inline-block' : 'none'}}>
											<NCCheckbox
                                                disabled={emp.pageStatus !== 'edit'}
                                                checked={action.tableAct.setTitleCheck(item.pk_infoset)}
                                                //checked={emp.titleChecked}
                                                onChange={action.tableAct.onCheckChange(item.pk_infoset, index)}
                                            />
											<span>{emp.language['gx6008-000269'] /*国际化处理： 是否需要审核*/} </span>
										</span>
                                    </If>
                                    <div className="nc-bill-table-area">
                                        {editTable.createEditTable('appconfgrid' + index, {
                                            onAfterEvent: action.tableAct.tableAfterEdit
                                        })}
                                    </div>
                                </div>
                            </NCScrollElement>
                        );
                    })}
                </div>
            </Content>
        </Layout>
    );
});

export default connect(Wrapper);
